<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>img</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="jst/imgEditCss.css">
		<script type="text/javascript" src="jst/imgEditor.js" charset="utf-8"></script>
		<style type="text/css">
			.bs-example-modal-lg {}
		</style>
	</head>

	<body>
		<!-- <img src='http://www.hoyoubo.com/images/hoyoubo_07.png' width="500" /> -->
		<button onclick="ddd()">试试</button>
		<div class="modal fade bs-example-modal-lg" id="img_editor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close img_write_close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					</div>
					<div class="modal-body">
						<div class="img_tool_box">
							<div class="part">
								<span class="img_text">文字标记：</span>
								<span class="img_write_btn img_tool"></span>
							</div>
							<div class="part">
								<span class="img_text">画笔：</span>
								<span class="line_width small_l on img_tool" data-width="1"></span>
								<span class="line_width middle_l img_tool" data-width="2"></span>
								<span class="line_width big_l img_tool" data-width="4"></span>
								<span class="line_width lager_l img_tool" data-width="6"></span>
							</div>
							<div class="part">
								<span class="img_text">橡皮擦：</span>
								<span class="eraser small_eraser img_tool" data-eraser="5"></span>
								<span class="eraser middle_eraser img_tool" data-eraser="10"></span>
								<span class="eraser big_eraser img_tool" data-eraser="20"></span>
							</div>
							<div class="part">
								<span class="img_text">颜色：</span>
								<span class="color_box red img_tool" data-color="red"></span>
								<span class="color_box green img_tool" data-color="green"></span>
								<span class="color_box blue img_tool" data-color="blue"></span>
								<span class="color_box black on img_tool" data-color="black"></span>
							</div>
							<div class="part">
								<span class="img_text">清除：</span>
								<span class="clear_btn img_tool glyphicon glyphicon-trash"></span>
							</div>
							<div class="part">
								<span class="img_text">旋转：</span>
								<span class="repeat_btn img_tool glyphicon glyphicon-repeat" aria-hidden="true"></span>
							</div>
						</div>
						<div class="canvas_outer_box">
							<canvas id="c0" width="" height=""></canvas>
							<canvas id="c1" width="" height=""></canvas>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary">确定</button>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		function ddd() {
			$('#img_editor').modal('show');
			var imgWrite = new ImgWrite($('#img_editor .modal-body'), $(this), $('#img_editor')); //
			imgWrite.setWH();
		}
		$(obj).on('dblclick', 'img', function(event) {
			event.stopPropagation();
			img = $(this);
			$('#img_editor').modal('show');
			var imgWrite = new ImgWrite($('#img_editor .modal-body'), $(this), $('#img_editor')); //
			imgWrite.setWH();
		});
	</script>

</html>